<template>
  <div id="personal-center">
    <el-collapse accordion @change="handleChange">
      <el-collapse-item name="baseInfo">
        <template slot="title">
          基本信息
          <i class="header-icon el-icon-info"></i>
        </template>
        <el-form ref="baseInfoModel" size="medium" :model="baseInfoModel" :rules="baseInfoModelRules" label-width="150px" @submit.native.prevent style="width: 80%;">
          <el-form-item label="登录账号" prop="loginName"><el-input v-model="baseInfoModel.loginName" :disabled="true"></el-input></el-form-item>
          <el-form-item label="姓名" prop="realName"><el-input v-model="baseInfoModel.realName" :disabled="baseInfoEditingState"></el-input></el-form-item>
          <el-form-item label="昵称"><el-input v-model="baseInfoModel.nickname" :disabled="baseInfoEditingState"></el-input></el-form-item>
          <el-form-item label="性别" prop="sex">
            <select class="form-control" v-data-dictionary-directive:A1003 v-model="baseInfoModel.sex" :disabled="baseInfoEditingState"></select>
          </el-form-item>
          <el-form-item label="邮箱"><el-input v-model="baseInfoModel.email" :disabled="baseInfoEditingState"></el-input></el-form-item>
          <el-form-item label="手机号码" prop="mobilePhone"><el-input v-model="baseInfoModel.mobilePhone" :disabled="baseInfoEditingState"></el-input></el-form-item>
          <el-form-item label="状态" prop="status">
            <select class="form-control" v-data-dictionary-directive:A1029 v-model="baseInfoModel.status" :disabled="true"></select>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <select class="form-control" v-data-dictionary-directive:A1004 v-model="baseInfoModel.type" :disabled="true"></select>
          </el-form-item>
          <el-form-item style="text-align: left;">
            <el-button type="danger" @click="baseInfoEditingStateChange">{{ baseInfoEditingState ? '修改' : '取消' }}</el-button>
            <el-button type="primary" @click="updateBaseInfo" :disabled="baseInfoEditingState" :loading="submitting">保存</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item name="updatePassword">
        <template slot="title">
          修改密码
          <i class="header-icon el-icon-s-tools"></i>
        </template>
        <el-form :inline="true" ref="updatePwdModel" size="medium" :model="updatePwdModel" :rules="rules" label-width="150px" @submit.native.prevent>
          <el-form-item label="新密码" prop="password">
            <el-input v-model="updatePwdModel.password" prefix-icon="el-icon-key" type="password" maxlength="36" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="confirmPassword">
            <el-input v-model="updatePwdModel.confirmPassword" prefix-icon="el-icon-key" type="confirmPassword" maxlength="36" show-password></el-input>
          </el-form-item>
          <el-form-item style="text-align: left;"><el-button type="primary" @click="updatePwd">提交</el-button></el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item name="myOrganization">
        <template slot="title">
          组织信息
          <i class="header-icon el-icon-user-solid"></i>
        </template>
        <div class="echarts1" :style="{ width: '1100px', height: '60vh' }"></div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import Vue from 'vue';
import echarts from 'echarts';

export default {
  name: 'personal-center',
  components: {},
  data() {
    let checkPassword = (rule, value, callback) => {
      if (Vue.$isNullOrIsBlankOrIsUndefined(value)) {
        return callback(new Error('请输入新密码'));
      }

      let reg1 = /^\S+$/gi;
      if (!reg1.test(value)) {
        return callback(new Error('密码不能包含空格'));
      }

      let reg2 = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{4,16}$/;
      if (!reg2.test(value)) {
        return callback(new Error('密码必须是[数字+字母+特殊字符]的组合形式，且长度在4到16位之间'));
      }

      callback();
    };

    let checkConfirmPassword = (rule, value, callback) => {
      if (Vue.$isNullOrIsBlankOrIsUndefined(value)) {
        return callback(new Error('请输入新密码'));
      }

      let reg1 = /^\S+$/gi;
      if (!reg1.test(value)) {
        return callback(new Error('密码不能包含空格'));
      }

      let reg2 = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{4,16}$/;
      if (!reg2.test(value)) {
        return callback(new Error('密码必须是[数字+字母+特殊字符]的组合形式，且长度在4到16位之间'));
      }

      if (this.updatePwdModel.password !== this.updatePwdModel.confirmPassword) {
        return callback(new Error('两次密码不一致'));
      }

      callback();
    };
    return {
      submitting: false,
      baseInfoModel: {
        id: null,
        realName: '',
        nickname: '',
        email: '',
        mobilePhone: '',
        sex: '',
        type: '',
        status: ''
      },
      baseInfoEditingState: true,
      updatePwdModel: {
        password: '',
        confirmPassword: ''
      },
      baseInfoModelRules: {
        realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        mobilePhone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }]
      },
      rules: {
        password: [
          {
            required: true,
            validator: checkPassword,
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          {
            required: true,
            validator: checkConfirmPassword,
            trigger: 'blur'
          }
        ]
      },
      selectedModel: {},
      option1: {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            data: [],
            top: '10%',
            left: '25%',
            bottom: '22%',
            right: '20%',
            symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            symbolSize: 10,
            edgeShape: 'polyline',
            edgeForkPosition: '63%',
            lineStyle: {
              color: '#009688',
              type: 'dotted' // solid dashed dotted
            },
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right'
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
            initialTreeDepth: 8
          }
        ]
      }
    };
  },
  async mounted() {
    let myChart1 = echarts.init(document.querySelector('.echarts1'));
    myChart1.setOption(this.option1);
  },
  created: function() {},
  methods: {
    handleChange: function(val) {
      if (val === 'baseInfo') {
        Vue.$ajax({
          method: 'get',
          url: Vue.$adminServerURL + '/web/v1/IndexController/getLoginUserDetail'
        }).then(res => {
          if (res.data.flag !== 'SUCCESS') {
            if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
              this.$message({
                message: res.data.message,
                type: 'warning'
              });
            }
          } else {
            this.baseInfoModel = res.data.obj;
          }
        });
      } else if (val === 'myOrganization') {
        Vue.$ajax({
          method: 'get',
          url: Vue.$adminServerURL + '/web/v1/IndexController/buildOrgnizationByUserId'
        }).then(res => {
          if (res.data.flag !== 'SUCCESS') {
            if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
              this.$message({
                message: res.data.message,
                type: 'warning'
              });
            }
          } else {
            this.formModel = res.data.obj;
            this.option1.series[0].data.push(res.data.obj);
            let myChart1 = echarts.init(document.querySelector('.echarts1'));
            myChart1.setOption(this.option1);
          }
        });
      }
    },
    baseInfoEditingStateChange: function() {
      if (this.baseInfoEditingState) {
        this.baseInfoEditingState = false;
      } else {
        this.baseInfoEditingState = true;
      }
    },
    updateBaseInfo: function() {
      this.$refs['baseInfoModel'].validate(valid => {
        if (!valid) {
        } else {
          this.submitting = true;
          Vue.$ajax({
            method: 'put',
            url: Vue.$adminServerURL + '/web/v1/UserController/user',
            data: this.baseInfoModel
          }).then(res => {
            this.submitting = false;
            this.baseInfoEditingState = true;
            if (res.data.flag !== 'SUCCESS') {
              if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
                this.$message({
                  message: res.data.message,
                  type: 'warning'
                });
              }
            } else {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
            }
          });
        }
      });
    },
    updatePwd: function() {
      this.$refs['updatePwdModel'].validate(valid => {
        if (!valid) {
          return false;
        } else {
          Vue.$ajax({
            method: 'post',
            url: Vue.$adminServerURL + '/web/v1/IndexController/changePassword',
            data: this.updatePwdModel
          }).then(res => {
            if (res.data.flag !== 'SUCCESS') {
              if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
                this.$message({
                  message: res.data.message,
                  type: 'warning'
                });
              }
            } else {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
              this.resetForm();
            }
          });
        }
      });
    },
    resetForm() {
      this.$refs['updatePwdModel'].resetFields();
    }
  }
};
</script>
